<template>
    <div class="relative">
      <img
        :src="avatarUrl"
        :alt="user.username"
        class="rounded-full object-cover"
        :class="sizeClass"
      >
      
      <div v-if="isOnline" class="absolute bottom-0 right-0 w-3 h-3 bg-green-500 rounded-full border-2 border-white"></div>
    </div>
  </template>
  
  <script>
  import { computed } from 'vue'
  
  export default {
    props: {
      user: {
        type: Object,
        required: true
      },
      size: {
        type: String,
        default: 'md',
        validator: (value) => ['sm', 'md', 'lg', 'xl'].includes(value)
      },
      isOnline: {
        type: Boolean,
        default: false
      }
    },
    
    setup(props) {
      const avatarUrl = computed(() => {
        return props.user.avatarUrl || 'https://picsum.photos/200/200?random=' + props.user.id
      })
      
      const sizeClass = computed(() => {
        switch (props.size) {
          case 'sm': return 'w-8 h-8'
          case 'md': return 'w-12 h-12'
          case 'lg': return 'w-16 h-16'
          case 'xl': return 'w-24 h-24'
          default: return 'w-12 h-12'
        }
      })
      
      return {
        avatarUrl,
        sizeClass
      }
    }
  }
  </script>